<html>
  <head>
    <script>
      Ext.require([
          'Ext.grid.*',
          'Ext.data.*',
          'Ext.util.*',
      ]);
      
      // The data structure returned in JSON
      Ext.define('CrawlableResource', {
          extend: 'Ext.data.Model',
          fields: ['key', 'name', 'organizationName', 'type'],
      });      
      
      var grid;
      function reloadGrid(sourceUrl, title) {
          grid.getStore().proxy.url=sourceUrl;
          grid.getStore().load(); 
          grid.setTitle(title);
      }
      
      Ext.onReady(function() {
        
        var store = Ext.create('Ext.data.Store', {
          model: 'CrawlableResource',
          autoLoad: true,
          proxy: {
            type: 'ajax',
            url: '<@s.url value="/Job/criticalPriority"/>',
            reader: {type: 'json',}     
          }
        });
        
        // create the Grid
        grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [
              {header: "Name", width: 400, dataIndex: 'name', sortable: false},
              {header: "Type", width: 400, dataIndex: 'type', sortable: false},
            ],
            renderTo:'grid',
            stripeRows: true,
            height: 350,
            width: 1000,
            title: "Resources needing urgent attention",
        });
        
        // go to detail page on click
        grid.on('selectionchange', function(view, selectedRecord){
          window.location = "<@s.url value='/CrawlableResource/detail?key='/>" + selectedRecord[0].get('key');
        });          
        
      });
    </script>
  </head>
  <body>
    <div class="subMenu">
      <h2>At a glance</h2>
      <ul>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/running"/>', 'Resources being crawled now')">What's running?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/criticalPriority"/>', 'Resources needing urgent attention')">What's most urgent?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/highPriority"/>', 'Resources considered high priority')">What's high priority?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/offline"/>', 'Offline resources')">What's offline?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/recentlyFinished"/>', 'Resources recently crawled')">What's recently finished?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/reportingErrors"/>', 'Resources reporting errors')">What's reporting errors?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/missingRecords"/>', 'Resources missing records')">What's missing records?</a></li>
        <li><a href="javascript:reloadGrid('<@s.url value="/Job/overCrawled"/>', 'Resources with more records than expected')">What's over crawled?</a></li>
      </ul>
    </div>
    <div class="subPage">
      <div id="grid"></div>
    </div>
  </body>
</html>